<template>
  <el-dialog
    width="60%"
    title=""
    custom-class="techDialog"
    :visible.sync="limitTechVisible"
    :modal="false"
    :close-on-click-modal="false"
    append-to-body
  >
    <el-dialog
      width="30%"
      custom-class="techDialog"
      title="请选择对应的申请表填写"
      :visible.sync="downloadVisible"
      append-to-body
    >
      <div v-if="selectLimitData.length > 0" class="tips font16">
        已选择限制类技术 ：{{ selectLimitData[0].id }}-{{
          selectLimitData[0].technicalName
        }}
      </div>
      <div class="flex flex-column align-left">
        <el-link
          type="primary"
          :underline="false"
          class="mt15"
          @click="downLimitDoc(1)"
        >1、技术申报初筛选表（首家或限制类使用）</el-link>
        <el-link
          type="primary"
          :underline="false"
          class="mt15"
          @click="downLimitDoc(2)"
        >2、限制类备案使用——新技术备案申请表</el-link>
        <el-link
          type="primary"
          :underline="false"
          class="mt15"
          @click="downLimitDoc(3)"
        >3、限制类备案使用——新技术备案申请表（样表）</el-link>
      </div>
    </el-dialog>
    <div slot="title" class="clearfix flex flex-row align-center">
      <div class="line" />
      <span class="font16 ml10 fw600">请从下列列表中确认是否为限制技术</span>
      <el-button
        type="success"
        round
        icon="el-icon-download"
        size="small"
        class="ml50"
        @click="limitDownload"
      >下载限制类列表</el-button>
    </div>
    <el-form ref="queryLimitForm" :model="queryParams" :inline="true">
      <el-form-item label="医疗技术名称" prop="technicalName">
        <el-input
          v-model="queryParams.technicalName"
          placeholder="请输入医疗技术名称"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="handleLimitQuery"
        >搜索</el-button>
        <el-button
          icon="el-icon-refresh"
          size="small"
          @click="resetLimitQuery"
        >重置</el-button>
      </el-form-item>
      <el-form-item class="fr">
        <el-button
          type="danger"
          icon="el-icon-warning-outline"
          size="small"
          @click="handelShowTech"
        >未查询到限制类，申报非限制类</el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="limitTable"
      v-loading="loading"
      border
      tooltip-effect="dark"
      :data="limitTechList"
      :header-cell-class-name="cellClass"
      @select="selectTech"
    >
      <el-table-column
        type="selection"
        width="80"
        align="center"
      />
      <el-table-column label="序号" prop="id" width="120" />
      <el-table-column
        label="医疗技术名称"
        prop="technicalName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="级别"
        prop="classLevel"
        :show-overflow-tooltip="true"
      />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      class="tech"
      :page.sync="queryParams.currentPage"
      :limit.sync="queryParams.pageSize"
      @pagination="getNewLimitTechListHandel"
    />
    <div slot="footer" class="flex flex-row">
      <div v-if="selectLimitData.length == 0" class="tips flex-auto text-left">
        未选择
      </div>
      <div v-else class="tips flex-auto text-left">
        已选择：{{ selectLimitData[0].id }}-{{ selectLimitData[0].technicalName }}
      </div>
      <div class="btn-list">
        <el-button size="small" @click="close">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :disabled="selectLimitData.length == 0"
          @click="downloadVisible = true"
        >确认选择，限制类申报</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {exportLimitTechList, getLimitTechList, getNewLimitTechList, getNewTechList, getTechList} from '@/api/xjs/tech'
export default {
  name: 'LimitDialog',
  data() {
    return {
      limitTechList: [],
      selectLimitData: [],
      loading: false,
      limitTechVisible: false,
      downloadVisible: false,
      total: 0,
      queryParams: {
        currentPage: 1,
        pageSize: 5,
        technicalName: ''
      }
    }
  },
  methods: {
    handelShowTech() {
      this.$emit('showTech')
    },
    open() {
      this.limitTechVisible = true
      // this.getLimitTechListHandel()
      this.getNewLimitTechListHandel()
    },
    close() {
      this.limitTechVisible = false
    },
    limitDownload() {
      exportLimitTechList({pageSize:1}).then(res=>{
        // console.log(res)
        const blob = new Blob([res], { type: 'application/vnd.ms-excel;' })
        let downloadUrl = window.URL.createObjectURL(blob);
        let a = document.createElement('a')
        a.href = downloadUrl
        a.download = '限制类列表.xlsx'
        a.style.display = 'none'
        document.body.appendChild(a)
        a.click()
        a.remove()
      })
    },
    downLimitDoc(type) {
      var a = document.createElement('a')
      switch (type) {
        case 1:
          a.href = '/static/xjs/附件-技术申报初筛表（首家或限制类使用）.docx'
          a.download = '附件-技术申报初筛表（首家或限制类使用）.docx'
          break
        case 2:
          a.href = '/static/xjs/限制类备案使用——新技术备案申请表.doc'
          a.download = '限制类备案使用——新技术备案申请表.doc'
          break
        case 3:
          a.href = '/static/xjs/限制类备案使用——新技术备案申请表（样表）.docx'
          a.download = '限制类备案使用——新技术备案申请表（样表）.docx'
          break
      }
      a.style.display = 'none'
      document.body.appendChild(a)
      a.click()
      a.remove()
    },
    // 隐藏表头中的全选框
    cellClass(row) {
      if (row.columnIndex === 0) {
        return 'disabledCheck'
      }
    },
    selectTech(selection, row) {
      // 清除 所有勾选项
      this.selectLimitData = []
      this.$refs.limitTable.clearSelection()
      // 当表格数据都没有被勾选的时候 就返回
      // 主要用于将当前勾选的表格状态清除
      if (selection.length == 0) return
      this.$refs.limitTable.toggleRowSelection(row, true)
      this.selectLimitData.push(row)
      console.log(this.selectLimitData)
    },

    handleLimitQuery() {
      this.queryParams.currentPage = 1
      // this.getLimitTechListHandel()
      this.getNewLimitTechListHandel()
    },
    /** 重置按钮操作 */
    resetLimitQuery() {
      this.resetForm('queryLimitForm')
      this.handleLimitQuery()
    },
    handleSelectionChange(selection) {},
    getLimitTechListHandel() {
      this.selectLimitData = []
      this.loading = true
      getLimitTechList(this.queryParams, this.dateRange).then(response => {
        this.limitTechList = response.data.list
        this.total = response.data.count
        this.loading = false
      })
    },
    getNewLimitTechListHandel() {
      this.selectLimitData = []
      this.loading = true
      getNewLimitTechList(this.queryParams).then(response => {
        console.log(1111,response)
        this.limitTechList = response.records
        this.total = response.total
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-pager li {
  padding: 0 4px;
  background: #fff;
  vertical-align: top;
  display: inline-block;
  font-size: 13px;
  min-width: 35.5px;
  height: 28px;
  line-height: 28px;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  margin: 0;
}
</style>
